<template>
	<view>
		<view class="headBox">
			<image src="/static/image/myhead3.png" mode="" class="backgroundImg"></image>
			<view class="headImg" @click="flag && loginBtn()">
				<image :src="avatar_url" mode=""></image>
			</view>
			<view class="userName">{{nickname}}</view>
			<view class="openwoman" @click="openWomanPort()" v-if="isShow">
				<image src="/static/image/enter.png" mode=""></image>
				<text>我是月嫂</text>
			</view>
		</view>
		<view class="content">
			<view class="item" @click="openMyCoupon()">
				<image src="/static/image/mycoupon.png" mode=""></image>
				<text class="">我的优惠券</text>
				<uni-icon type="arrow" size="20" color="#e5e5e5" class="icon-right"></uni-icon>
			</view>
			<view class="item" @click="openYuYue()">
				<image src="/static/image/myyuyue.png" mode=""></image>
				<text class="">预约管理</text>
				<uni-icon type="arrow" size="20" color="#e5e5e5" class="icon-right"></uni-icon>
			</view>
			<view class="item">
				<image src="/static/image/mykecheng.png" mode=""></image>
				<text class="">课程报名管理</text>
				<uni-icon type="arrow" size="20" color="#e5e5e5" class="icon-right"></uni-icon>
			</view>
			<view class="item" @click="openCollect()">
				<image src="/static/image/mycollect.png" mode=""></image>
				<text class="">收藏月嫂</text>
				<uni-icon type="arrow" size="20" color="#e5e5e5" class="icon-right"></uni-icon>
			</view>
			<view class="item" @click="openAboutMe()">
				<image src="/static/image/aboutme.png" mode=""></image>
				<text class="">关于我们</text>
				<uni-icon type="arrow" size="20" color="#e5e5e5" class="icon-right"></uni-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {dns} from '@/pages/dns.js';
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	export default {
		data(){
			return {
				nickname: '点击登录',
				avatar_url: '',
				isShow: false,
				flag: true //控制登录事件是否触发
			}
		},
	    components: {
			uniIcon
		},
		watch:{
			userName(newValue, oldValue){
				console.log(newValue)
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getmyInfo();
		},
		methods:{
			getmyInfo(){//检测登陆状态以及是否是月嫂,能否点击头像进行登录
				var storageflag = uni.getStorageSync("storageflag");
				if(storageflag){
					this.flag = false;
				}
				var token = uni.getStorageSync("token");
				if(token){
					uni.request({
						method: 'GET',
						header:{
							token: token
						},
						url: dns + 'matron/data',
						success: (res)=>{
							// console.log(res);
							if(res.data.status == -1){
								this.flag = true;//token失效时解锁头像点击事件
								this.avatar_url = '';
								this.nickname = '重新登陆';
								uni.showModal({
								    title: '提示',
								    content: '登陆过期,请重新登录',
								    success: function (res) {
								        if (res.confirm) {//用户点击确定
											uni.navigateTo({
											   url: '/pages/index/login/index'
											});
								        } else if (res.cancel) {
											
								        }
								    }
								});
								return;
							}
							if(res.data.status !== -2){//是月嫂
								this.isShow = true;
								this.avatar_url = res.data.data.head_url
								this.nickname = res.data.data.name;
								return;
							}
							uni.getStorage({
							    key: 'avatar_url',
							    success: (res)=>{
							        this.avatar_url = res.data
							    }
							});
							uni.getStorage({
							    key: 'nickname',
							    success: (res)=>{
							        this.nickname = res.data
							    }
							});
						}
					})
				}
			},
			loginBtn(){//登录
				uni.navigateTo({
				   url: '/pages/index/login/index'
				});
			},
			openWomanPort(){//进入月嫂端
				uni.navigateTo({
				   url: '/pages/my/womanport/index'
				});
			},
			openMyCoupon(){//打开我的优惠券
				uni.navigateTo({
				   url: '/pages/my/mycoupon/index'
				});
			},
			openYuYue(){//打开预约管理
				uni.navigateTo({
				   url: '/pages/my/yuyue/index'
				});
			},
			openCollect(){//打开收藏月嫂
				uni.navigateTo({
				   url: '/pages/my/collect/index'
				});
			},
			openAboutMe(){//打开关于我们
				uni.navigateTo({
				   url: '/pages/my/aboutme/index'
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff
	}
	.headBox{
		position: relative;
		width: 100%;
		height: 300upx;
		background-color: #fff;
		.backgroundImg{
			width: 100%;
			height: 100%;
		}
		.headImg{
			position: absolute;
			top: 40upx;
			left: 50%;
			width: 140upx;
			height: 140upx;
			overflow: hidden;
			border-radius: 50%;
			transform: translate(-50%,0);
			box-shadow: 0 0 20upx rgba(0,0,0,.3);
			border: 4upx solid #fff;
			background-color:aliceblue;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.userName{
			position: absolute;
			bottom: 60upx;
			left: 50%;
			transform: translate(-50%,0);
			color: #fff;
			font-size: 32upx;
			font-weight: bold
		}
		.openwoman{
			position: absolute;
			top: 20upx;
			right: 30upx;
			color: #000;
			font-size: 24upx;
			opacity: 0.6;
			image{
				width: 30upx;
				height: 30upx;
				vertical-align:middle;
				margin-right: 2upx;
			}
			text{
				vertical-align:middle;
				line-height: 24upx;
				font-weight: bold
			}
		}
	}
	.content{
		margin-top: 16upx;
		.item{
			position: relative;
			font-size: 30upx;
			line-height: 100upx;
			background-color: #fff;
			padding: 0 110upx;
			border-bottom: 2upx solid #fafafa;
			image{
				position: absolute;
				top: 24upx;
				left: 40upx;
				width: 50upx;
				height: 50upx;
			}
			.icon-right{
				position: absolute;
				top: 6px;
				right: 40upx;
			}
		}
	}
</style>
